<!--
* author: zhanghuan
* created: 2019/1/12
* describe: 顶部菜单导航
-->
<template>
  <div class="nav-top">
    <el-menu
      :default-active="activeIndex"
      class="nav-top-menu"
      mode="horizontal"
      @select="handleSelect"
      :background-color="maicClr"
      text-color="#fff"
      active-text-color="#fff"
    >
      <el-menu-item
        v-for="(item, i) in menuData"
        :index="item.hash"
        :key="i"
        text-color="#fff"
        active-text-color="#000"
      >{{item.name}}</el-menu-item>
    </el-menu>
  </div>
</template>

<script type="text/ecmascript-6">
import Config from '../js/config'
import Menu from '../js/menuConfig'
export default {
  name: "navTop",
  data() {
    return {
      activeIndex: '/home',
      menuData: Menu,
      maicClr: Config.mainClr
    }
  },
  methods: {
    /*
    * params: 无
    * return: 无
    * function: 初始化方法
    * */
    init() {
      let reg = /^\/[^/]*/i
      let pathArr = this.$route.path.match(reg)
      this.activeIndex = pathArr[0]
    },
    /*
     * params: 无
     * return: 无
     * function: 菜单选择
     * */
    handleSelect(key, keyPath) {
      this.$router.push(keyPath.join())
    }
  },
  mounted() {
    
  }
}
</script>

<style lang="scss">
@import "../style/variables.scss";
.nav-top {
  position: relative;
  z-index: 1;
  height: 50px;
  background: $mainC;
  -webkit-box-shadow: 0 2px 4px rgba(0, 21, 41, 0.3);
  box-shadow: 0 2px 4px rgba(0, 21, 41, 0.3);
  user-select: none;
  .nav-top-menu {
    background: none;
    .el-menu-item {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }
  }
}
</style>
